<template>
  <section class="chart-container">
    <el-row>
      <el-col :span="12">
        <div id="chartColumn" style="width:100%; height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="chartBar" style="width:100%; height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="chartLine" style="width:100%; height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="chartPie" style="width:100%; height:400px;"></div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      chartColumn: null,
      chartBar: null,
      chartLine: null,
      chartPie: null,
      data: [] // 定义数据属性
    }
  },

  methods: {
    drawColumnChart() {
      this.chartColumn = echarts.init(document.getElementById('chartColumn'));
      this.chartColumn.setOption({
        title: {text: '统计点赞前六的文章'},
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '点赞量',
          type: 'bar',
          data: []
        }]
      });
    },

    startCount() {
      this.$http.get('/article/star/top6').then(res => {
        if (res.data.success) {
          // console.log(res.data.data);
          this.data = res.data.data;
          let articleNames = this.data.map(item => item.article_name);
          let stars = this.data.map(item => item.article_star_num);

          this.chartColumn.setOption({
            xAxis: {
              data: articleNames,
              axisLabel: {
                rotate: 45
              }
            },
            series: [{
              name: '点赞数',
              type: 'bar',
              data: stars
            }]
          });
        } else {
          this.$message(res.data.msg);
        }
      });
    },

    drawPieChart(data) {
      this.chartPie = echarts.init(document.getElementById('chartPie'));
      const option = {
        title: {
          text: '统计前五文章数量最多的类型',
          subtext: '纯属虚构',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: data.map(item => item.typeName)
        },
        series: [
          {
            name: '文章类型',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: data.map(item => ({
              value: item.count,
              name: item.typeName
            })),
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(185,53,53,0.5)'
              }
            }
          }
        ]
      };
      this.chartPie.setOption(option);
    },

    typeCount() {
      this.$http.get("article/type/top5").then(res => {
        if (res.data.success) {
          this.drawPieChart(res.data.data);
        }
      });
    },

    drawCharts() {
      this.drawColumnChart();
      this.startCount();
      this.typeCount();
    }
  },

  mounted() {
    this.drawCharts();
  },
  updated() {
    this.drawCharts();
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  float: left;
}

.el-col {
  padding: 30px 20px;
}
</style>
